<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="系统消息"
      left-text="返回"
      left-arrow
      @click-left="prev"
    />

    <van-row style="margin-top: 10px;" @click="jump('Announcement')">
      <van-col span="4">
        <van-icon name="volume" :badge="3" color="red"  size="3rem" />
      </van-col>
      <van-col span="18" style="text-align: left;">
        平台公告<br><font color="grey">你好</font>
      </van-col>
    </van-row>
    <hr>

    <van-row style="margin-top: 10px;" @click="jump('order')">
      <van-col span="4">
        <van-icon name="orders-o" :badge="3" color="blue"  size="3rem" />
      </van-col>
      <van-col span="18" style="text-align: left;">
        订单信息<br><font color="grey">你好</font>
      </van-col>
    </van-row>
    <hr>


  </div>
</template>

<script>
  //书写组件配置项目 相当于写js代码的地方
  //要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
  export default {
    //export default 相当于过去的new vue ({el:"#div"})
    //全部都是json格式

    props: {
      //注册属性，用来父子组件传递参数使用
    },
    data() {
      //定义数据的地方
      return {};
    },
    created() {
      //生命周期  创建后要做的事情  vue被创建时候执行的
    },
    mounted() {
      // 生命周期  挂载完成后
    },
    methods: {
      //  方法事件处理
      prev() {
            this.$router.go(-1);
        },
      jump(uri) {
            this.$router.push(uri, () => {},
          () => {});
      },
    },
    components: {
      // 组件注册的地方 相当于pom文件
    },
  };
</script>

<style>
  /* 编写样式的 */
</style>
